<template>
	<view class="c-wrap">
		<ice-header :account="userInfo && userInfo.nickname"></ice-header>
		<view class="main-box">
			<view class="tab-box u-flex">
				<view class="tab-item day" :class="{'tab-active':type=='day'}" @click="changeTab('day')">{{$t('日榜')}}</view>
				<view class="tab-item week" :class="{'tab-active':type=='week'}" @click="changeTab('week')">{{$t('周榜')}}</view>
				<view class="tab-item month" :class="{'tab-active':type=='month'}" @click="changeTab('month')">{{$t('月榜')}}</view>
			</view>
			<view style="margin-top: 40rpx;">
				<view class="u-flex" style="margin: 0 0rpx;">
					<view class="u-flex-fill" style="overflow: hidden;">
						<view class="second-box" style="margin-top: 120rpx;margin-left: 60rpx;">
							<u--image style="margin-left: 25rpx;margin-top: 34rpx" src="../../static/avatar.png" shape="circle" width="110rpx" height="110rpx" mode="scaleToFill"></u--image>
						</view>
					</view>
					<view class="u-flex-fill" style="overflow: hidden;">
						<view class="first-box">
							<u--image style="margin-left: 31rpx;margin-top: 39rpx" src="../../static/avatar.png" shape="circle" width="154rpx" height="154rpx" mode="scaleToFill"></u--image>
						</view>
					</view>
					<view class="u-flex-fill" style="overflow: hidden;">
						<view class="third-box" style="margin-top: 160rpx;">
							<u--image style="margin-left: 22rpx;margin-top: 30rpx" src="../../static/avatar.png" shape="circle" width="102rpx" height="102rpx" mode="scaleToFill"></u--image>
						</view>
					</view>
					
					
				</view>
			</view>
			<view class="three-box u-flex" style="margin-top: -80rpx;text-align: center;">
				<view  style="margin-left: 40rpx;width: 180rpx;margin-top: 100rpx;">
					<view style="width: 180rpx;" class="u-line-1">{{rank2 ? rank2.nickname : '无' }}</view>
					<view>{{rank2 ? rank2.totalAmount : '-' }}</view>
					<view class="rank-num" style="font-size: 132rpx;line-height: 0.8;margin-top: 20rpx;">2</view>
				</view>
				<view  style="margin-left: 40rpx;width: 180rpx;margin-top: 40rpx;">
					<view style="width: 180rpx;" class="u-line-1">{{rank1 ? rank1.nickname : '无' }}</view>
					<view>{{rank1 ? rank1.totalAmount : '-' }}</view>
					<view class="rank-num" style="font-size: 228rpx;line-height: 0.8;margin-top: 10rpx;">1</view>
				</view>
				<view  style="margin-left: 40rpx;width: 180rpx;margin-top: 130rpx;">
					<view style="width: 180rpx;" class="u-line-1">{{rank3 ? rank3.nickname : '无' }}</view>
					<view>{{rank3 ? rank3.totalAmount : '-' }}</view>
					<view class="rank-num" style="font-size: 113.59rpx;line-height: 0.8;margin-top: 10rpx;">3</view>
				</view>
			</view>
			<view>
				<view class="other-box u-flex u-flex-middle" v-for="(item,idx) in other" :key="item._id">
					<text style="font-weight: bold;width: 40rpx;">{{4+idx}}</text>
					<u--image style="margin:0 20rpx;" :src="item.avatar" shape="circle" width="81.5rpx" height="81.5rpx" mode="scaleToFill"></u--image>
					<text style="width: 180rpx;" class="u-line-1">{{item.nickname}}</text>
					<text style="margin-left: auto;color: #EF043B;">{{item.totalAmount}}</text>
				</view>
			</view>
		</view>
		<view style="height: 70px;"></view>
		<ice-tabbar :index="1"></ice-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:null,
				rank1:null,
				rank2:null,
				rank3:null,
				other:[],
				type:'week',
				height:100,
			}
		},
		async onLoad(){
			await uni.$ice.checkLogin()
			this.getUserInfo()
			this.getRank();
		},
		methods:{
			changeTab(e){
				this.type = e
				this.rankList = [];
				this.getRank();
			},
			getUserInfo() {
				let tmp = uni.getStorageSync('userInfo')
				if (tmp) {
					this.userInfo = JSON.parse(tmp)
				}
				uni.$ice.post('user/index', {}, false).then(res => {
					uni.setStorageSync('userInfo', JSON.stringify(res.data));
					this.userInfo = res.data
					if(this.userInfo.username != uni.$ice.walletAddress){
						uni.removeStorageSync("token")
						location.reload();
					}
					uni.stopPullDownRefresh()
			
				}).catch(err => {
			
				})
			},
			getRank(){
				uni.$ice.post('user/rank', {type:this.type}, false).then(res => {
					this.rank1 = res.data.rank1	
					this.rank2 = res.data.rank2	
					this.rank3 = res.data.rank3	
					this.other = res.data.other	
				}).catch(err => {
							
				})
			},
		}
		
	}
</script>

<style scoped>
	page {
		background-color:transparent;
	}
	.main-box{
		/* background-image: url("../../static/rank/bj.png"); */
		/* background-size: 100% 100%;
		background-repeat: no-repeat; */
		padding-top: 50rpx;
		box-sizing: border-box;
		
	}
	.tab-box{
		width: 458rpx;
		height: 58rpx;
		background: #4879C9;
		border-radius: 30rpx;
		border: 2px solid #FFFFFF;
		margin: auto;
		overflow: hidden;
	}
	.rank-num{
		text-shadow: 0rpx 3rpx 7rpx rgba(0,0,0,0.48);
	}
	.tab-item {
		flex:1;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.week{
		border-left: 2px solid #FFFFFF;
		border-right: 2px solid #FFFFFF;
	}
	.tab-active{
		background-color: #FFFFFF;
		color: #407ED1;
	}
	.three-box{
		background-image: url("../../static/rank/1.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 685rpx;
		height: 348rpx;
		margin: auto;
	}
	.first-box{
		background-image: url("../../static/rank/dym.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 194rpx;
		height: 200rpx;
		overflow: hidden;
	}
	.second-box{
		background-image: url("../../static/rank/dem.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 142rpx;
		height: 150rpx;
		overflow: hidden;
	}
	.third-box{
		background-image: url("../../static/rank/dsm.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 129rpx;
		height: 136rpx;
		overflow: hidden;
	}
	.other-box{
		width: 701rpx;
		height: 139rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0,0,0,0.48);
		border-radius: 12rpx;
		opacity: 0.91;
		margin: 15rpx auto;
		color: #000000;
		box-sizing: border-box;
		padding: 0 40rpx;
		
	}
</style>